<template>
	<view>
		<cu-custom :isBack="true" :bgColor="'bg-'+ theme.themeColor">
			<block slot="backText">返回</block>
			<block slot="content">订单支付</block>
		</cu-custom>
		<view class="bg-red" :class="'bg-'+ theme.themeColor">
			<view class="flex align-center justify-center" style="height: 300rpx;">
				<view class="text-white text-bold text-price text-xxl">{{orderInfo.paymentPrice}}</view>
			</view>
			<view class="flex align-center justify-center">
				<view class="text-white">请在30分钟内付款，超时订单自动取消</view>
			</view>
		</view>
		<view class="margin-sm">
			<radio-group class="block" @change="radioChange">
				<view class="cu-list menu text-left">
					<!-- #ifdef APP-PLUS || MP-WEIXIN  -->
					<view class="cu-item">
						<label class="flex justify-between align-center flex-sub">
							<view class="flex-sub">微信支付</view>
							<radio class="round" :class="paymentType=='1'?'checked':''"
								:checked="paymentType=='1'?true:false" value="1"></radio>
						</label>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS || MP-ALIPAY ||  H5  -->
					<view class="cu-item">
						<label class="flex justify-between align-center flex-sub">
							<view class="flex-sub">支付宝支付</view>
							<radio class="round" :class="paymentType=='2'?'checked':''"
								:checked="paymentType=='2'?true:false" value="2"></radio>
						</label>
					</view>
					<!-- #endif -->
				</view>
			</radio-group>
		</view>
		<button class="cu-btn shadow-blur block margin-sm round bottom-btn" :class="'bg-'+ theme.themeColor"
			@tap="paySub">立即付款</button>
	</view>

</template>

<script>
	import {
		unifiedPay,
	} from '@/utils/pay.js';
	import {
		getById,
		unifiedOrder
	} from '@/api/orderinfo.js';
	export default {
		data() {
			return {
				theme: getApp().globalData.theme,
				orderInfo: {},
				paymentType: '1',
			}
		},
		onLoad(option) {
			getApp().initPage().then(res => {
				this.getOrder(option.id)
				// #ifdef MP-WEIXIN
				this.paymentType = '1';
				// #endif
				// #ifdef MP-ALIPAY
				this.paymentType = '2';
				// #endif
				// #ifdef APP-PLUS
				this.paymentType = '1';
				// #endif
			})
		},
		methods: {
			getOrder(id) {
				getById(id).then(res => {
					this.orderInfo = res.data;
				})
			},
			/**
			 * 选择支付方式
			 */
			radioChange(e) {
				this.paymentType = e.detail.value;
			},
			paySub() {
				let that = this;
				unifiedOrder({
					id: this.orderInfo.id,
					paymentType: this.paymentType,
					// #ifdef MP-WEIXIN || MP-ALIPAY
					tradeType: 'JSAPI',
					// #endif
					// #ifdef H5
					tradeType: 'MWEB',
					returnUrl: 'https://mall.ihuanxing.cn/pages/order-pay/index?id' + this.orderInfo
						.id, // 同步跳转地址，仅支持http/https
					quitUrl: 'https://mall.ihuanxing.cn/pages/order-pay/index?id' + this.orderInfo
						.id, //用户付款中途退出返回商户网站的地址
					// #endif
					// #ifdef APP-PLUS
					tradeType: 'APP',
					// #endif
				}).then(res => {
					let data = res.data;
					unifiedPay(data, that.orderInfo, '/pages/order/order-pay-result/index?id=' + that
						.orderInfo
						.id, this.paymentType)
				})

			}
		}
	}
</script>

<style lang="scss">
</style>
